<template>
    <div class="layerRtbContain cover">
        <!-- 切换标题 (定位) -->
        <div class="clearfix list-title" style="position: absolute;top: 0px;left: 0px;">
            <ul class="uiTab3 fl">
                <li class="uiTab3-active"><a href="javascript:">司管理</a></li>
                <!-- <li><a href="javascript:">选中项二</a></li>
                <li><a href="javascript:">选中项三</a></li> -->
            </ul>
        </div>
        <!-- 选中项 111 -->
        <div class="list-content">
            <div class="clearfix mb10">
                <div class="fr">
                    <router-link :to="this.$route.matched[1].path">
                        <input type="button" class="uiBtn-normal uiBtn-orange fl" value="返回">
                    </router-link>
                </div>
                <div class="fr mr5" v-show="timeType == 1">
                    <input @click="timeType = 2" data-title="选择任意日期，按所选日期的周来进行查询" type="button" class="uiBtn-normal uiBtn-blue fl mr5" value="选周">
                    <input @click="timeType = 3" type="button" class="uiBtn-normal uiBtn-blue fl mr5" value="选日">
                    <!-- <input type="button" class="uiBtn-normal uiBtn-blue fl mr5" value="本周"> -->
                    <el-date-picker value-format="yyyy-MM" v-model="month" type="month" placeholder="选择月" @change="selecterDate(2)"></el-date-picker>
                </div>

                <div class="fr mr5" v-show="timeType == 3">
                    <el-date-picker v-model="day" type="date" placeholder="选择日期" @change="selecterDate(0)"></el-date-picker>
                    <input @click="timeType = 1" type="button" class="uiBtn-normal uiBtn-blue fr ml5" value="取消">
                </div>
                <div class="fr mr5" v-show="timeType == 2">
                    <!-- <el-date-picker class="fl mr5" value-format="yyyy-MM-dd" v-model="startTime" type="date" placeholder="开始日期"></el-date-picker>
                    <el-date-picker class="fl mr5" value-format="yyyy-MM-dd" v-model="endTime" type="date" placeholder="结束日期"></el-date-picker> -->

                    <el-date-picker v-model="week" type="date" placeholder="选择周" @change="selecterDate(1)"></el-date-picker>
                    <input @click="timeType = 1" type="button" class="uiBtn-normal uiBtn-blue fr ml5" value="取消">
                </div>
            </div>
            <table class="uiTable">
                <thead>
                    <tr>
                        <th width="4%" colspan="5">隶属</th>
                        <th width="4%" colspan="6">项目</th>
                        <th width="4%" colspan="3">款项</th>
                        <th width="4%" colspan="7">项目经理</th>
                        <th width="4%" colspan="3">监理</th>

                    </tr>
                    <tr>
                        <th width="4%">
                            序号
                        </th>
                        <th width="4%">地区</th>
                        <th width="4%">城</th>
                        <th width="4%">工程经理</th>
                        <th width="4%"> 经理评价</th>

                        <th data-title="项目数量(审计、准备、在施)" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 数量</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th data-title="待完工的项目数量" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 竣工</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>

                        </th>
                        <th data-title="延期无延期单的工地数量" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 延期</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>

                        </th>
                        <th data-title="根据订单标注状态" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 搁置</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 投诉</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th data-title="本月已完工/本月应完工" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 完工率</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>

                        <th data-title="应回款数量,不含已回项目" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 应回款</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th data-title="不含已回项目" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl">金额</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th data-title="本月已回款/本月应回款" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 回款率</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>

                        <th data-title="项目经理正常数量(4级以上)" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 人数</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th data-title="在施/人数，看均值" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 均在施</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 材配比</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 人订比</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 质订比</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 现订比</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th data-title="摄像头使用率(订单完成率)" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 摄用率</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>

                        <th width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 人数</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th data-title="在施/人数，看均值" width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 均在施</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>
                        </th>
                        <th width="4%">
                            <div class="thSortBox2 clearfix">
                                <span class="fl"> 完成比</span>
                                <div class="thSort">
                                    <a href="javascript:;" class="thSortA thSortAt " @click="thSortAt($event)">
                                        <i class="thSortI thSort-up"></i>
                                    </a>
                                    <a href="javascript:;" class="thSortA thSortAb" @click="thSortAb($event)">
                                        <i class="thSortI thSort-down"></i>
                                    </a>
                                </div>
                            </div>

                        </th>
                    </tr>

                </thead>
                <tbody>
                    <!-- <tr>
                        <td>合计</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>6500</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr> -->
                </tbody>
            </table>
            <div class="thinScroll thinScroll-table" v-scrollHeight="10">
                <table class="uiTable uiTable-striped-odd uiTable-hover">
                    <tbody id="stayList_tb">
                        <tr v-for="(item,index) in divisionList" :key="index">
                            <td width="4%">{{index+1}}</td>
                            <td width="4%">{{item.diquName}}</td>
                            <td width="4%">{{item.cityName}}</td>
                            <!-- <td :class="{'cYellow':item.userName == ""}" width="4%" class="">{{item.userName}}</td> -->

                            <td width="4%" v-if="item.userName===''" class="cBRed">{{item.userName}}</td>
                            <td width="4%" v-else>{{item.userName}}</td>
                            <!-- <td width="4%" v-else-if="index==3" class="cBGreen">中</td> -->
                            <!-- <td width="4%" :class="{'cBRed':index == 4}">{{index | stage}}</td> -->
                            <!-- <td width="4%" class="cBGreen">{{item.evaluation}}</td> -->
                            <td width="4%" v-if="Number(item.evaluationNum)===3" class="cBRed">{{item.evaluation}}</td>
                            <td width="4%" v-else>{{item.evaluation}}</td>

                            <td width="4%">{{item.ptSum}}</td>
                            <td width="4%">{{item.ptCompleted}}</td>
                            <td width="4%">{{item.ptExtersion}}</td>
                            <td width="4%">{{item.ptPutonHold}}</td>
                            <td width="4%">{{item.ptComplaint}}</td>
                            <td width="4%">{{item.ptCompletionRate}}%</td>

                            <td width="4%">{{item.patReceivable}}</td>
                            <td width="4%">{{item.patMoney}}</td>
                            <!-- <td width="4%">{{item.payChargebackRate}}%</td> -->
                            <td width="4%" v-if="Number(item.payChargebackRate)>=75" class="cBGreen">{{item.payChargebackRate}}%</td>
                            <td width="4%" v-else class="cBRed">{{item.payChargebackRate}}%</td>

                            <td width="4%">{{item.pmPeopleSum}}</td>
                            <td width="4%">{{item.pmAreApplying}}</td>
                            <td width="4%">{{item.pmMaterialPatio}}%</td>
                            <td width="4%">{{item.pmPersonRatio}}%</td>
                            <td width="4%">{{item.pmQualityRatio}}%</td>
                            <td width="4%">{{item.pmFixedRatio}}%</td>
                            <td width="4%">{{item.pmUptate}}%</td>

                            <td width="4%">{{item.svPeopleSum}}</td>
                            <td width="4%">{{item.svAreApplying}}</td>
                            <td width="4%">{{item.svCompletionRatio}}%</td>
                            <!-- <td width="10%">111</td>
                            <td width="10%">15566778899</td>
                            <td width="10%">其他-手术室</td>
                            <td width="10%">1500</td>
                            <td width="10%">2018-08-06</td>
                            <td width="10%"></td>
                            <td width="10%">170.00㎡</td>
                            <td width="10%">商城</td>
                            <td width="10%"></td>
                            <td width="5%"><input type="button" class="uiBtn-small uiBtn-red" value="删除"></td> -->
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 选中项 222 -->
        <div class="list-content">

        </div>
    </div>
</template>
<script>
import { getDivisionList } from '../Resources/Api'
export default {
    data () {
        return {
            startTime: '',
            startEndTime: '',
            endTime: '',
            day: '',
            week: '',
            month: '',
            timeType: 1,
            seachIco: false,
            subIndex: 3,
            divisionList: []
        }
    },
    created () {
        this.getDivisionListFn()
    },
    methods: {
        getDivisionListFn (dateFlag, pointTime) {
            getDivisionList({
                dateFlag: dateFlag == null ? 2 : dateFlag,
                pointTime: pointTime == null ? null : pointTime
            }).then(results => {
                this.divisionList = results.data.Body.divisionList
            }).catch(error => {
                console.log(error)
            })
        },
        // 转换时间格式
        formateDate (datetime) {
            function addDateZero (num) {
                return (num < 10 ? '0' + num : num)
            }
            let d = new Date(datetime)
            let formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) + ' ' + addDateZero(d.getHours()) + ':' + addDateZero(d.getMinutes()) + ':' + addDateZero(d.getSeconds())
            return formatdatetime
        },

        selecterDate (value) {
            // alert(this.$utils.formatdatetime(this.week))

            switch (value) {
            case 0:
                let day = this.formateDate(this.day).substring(0, 10)
                this.getDivisionListFn(value, day)
                break
            case 1:
                let week = this.formateDate(this.week).substring(0, 10)
                this.getDivisionListFn(value, week)
                break
            case 2:
                let month = this.month + '-01'
                this.getDivisionListFn(value, month)
                break
            }
        },
        thSortAt: function (event) {
            $(event.currentTarget).addClass('current').siblings().removeClass('current')
            var cellindex = $(event.currentTarget).parent().parent('.thSortBox2').parent().index()
            this.sortSomeSheng(cellindex)
        },
        thSortAb: function (event) {
            $(event.currentTarget).addClass('current').siblings().removeClass('current')
            var cellindex = $(event.currentTarget).parent().parent('.thSortBox2').parent().index()
            this.sortSomeJiang(cellindex)
        },
        sortSomeSheng: function (type) {
            var tr = $('#stayList_tb tr')
            tr.sort(function (a, b) {
                if (parseFloat(a.cells[type].innerText) > parseFloat(b.cells[type].innerText)) {
                    return 1
                } else if (parseFloat(a.cells[type].innerText) == parseFloat(b.cells[type].innerText)) {
                    return 0
                } else {
                    return -1
                }
            })
            $('#stayList_tb').html(tr)
            // 序号排序
            $('#stayList_tb tr').each(function (index, obj) {
                $(this).children('td:eq(0)').text(index + 1)
            })
        },
        sortSomeJiang: function (type) {
            var tr = $('#stayList_tb tr')
            tr.sort(function (a, b) {
                if (parseFloat(a.cells[type].innerText) < parseFloat(b.cells[type].innerText)) {
                    return 1
                } else if (parseFloat(a.cells[type].innerText) == parseFloat(b.cells[type].innerText)) {
                    return 0
                } else {
                    return -1
                }
            })
            $('#stayList_tb').html(tr)
            // 序号排序
            $('#stayList_tb tr').each(function (index, obj) {
                $(this).children('td:eq(0)').text(index + 1)
            })
        },
        // 切换搜索
        seachIcoSwitch () {
            this.seachIco = !this.seachIco
        }
    }
}
</script>
<style scoped>
td.cYellow {
  background-color: yellow;
}
td.cBRed {
  background-color: red;
  color: black;
}
td.cBGreen {
  background-color: green;
  color: black;
}
</style>
